<template>
    <div class="param-edit">
        <n-divider dashed> 请求参数编辑</n-divider>
        <n-form ref="formRef" :model="formData" label-placement="left" label-width="80px" require-mark-placement="right-hanging">
            <n-form-item label="字段">
                <n-input v-model:value="formData.field" placeholder="请输入字段名" />
            </n-form-item>
            <n-form-item label="类型">
                <n-select v-model:value="formData.type" :options="typeOptions" />
            </n-form-item>
            <n-form-item label="mock值">
                <n-input v-model:value="formData.mock" placeholder="请输入mock值" />
            </n-form-item>
            <n-form-item label="描述">
                <n-input v-model:value="formData.description" placeholder="请输入描述" />
            </n-form-item>
            <n-form-item label="是否必选">
                <n-switch v-model:value="formData.required" />
            </n-form-item>
            <n-form-item v-if="!formData.required" label="默认值">
                <n-input v-model:value="formData.defaultValue" placeholder="请输入默认值" />
            </n-form-item>
            <n-form-item v-if="!formData.pattern" label="正则验证">
                <n-input v-model:value="formData.pattern" placeholder="请输入表达式" />
            </n-form-item>
            <div class="form-btn-container">
                <n-button type="primary" @click="handleSubmit">确认</n-button>
                <n-button @click="close">取消</n-button>
            </div>
        </n-form>
    </div>
</template>

<script>
import { cloneDeep } from "lodash";

export default {
    props: {
        datas: {
            type: Object,
            default: () => {
                return {
                    field: "",
                    type: "String",
                    mock: "",
                    description: "",
                    required: false,
                    defaultValue: "",
                    pattern: "",
                };
            },
        },
        callBack: {
            type: Function,
        },
        close: {
            type: Function,
        },
    },
    data() {
        return {
            formData: cloneDeep(this.datas),
            typeOptions: [
                {
                    label: "字符串",
                    value: "String",
                },
                {
                    label: "数值",
                    value: "Number",
                },
                {
                    label: "布尔类型",
                    value: "Boolean",
                },
            ],
        };
    },
    methods: {
        handleSubmit() {
            this.callBack(this.formData);
        },
    },
};
</script>

<style scoped lang="scss">
.param-edit {
    padding: 0 20px 20px;
}
</style>
